<template>
  <div class="custom-form">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
        :key="showFormKey">
        <!-- 物品领用 -->
        <el-col :span="24">
          <el-form-item label-width="0" prop="field1014526">
            <h2 align='center' style="color:undefined;font-size: nullpx;text-align: center">物品领用</h2>
          </el-form-item>
        </el-col>
        <!-- 申请人id -->
        <el-col :span="24" v-if="hasFormPermission('F_UserId')" v-show="showFlag">
          <el-form-item :label="$t('申请人id')" prop="F_UserId">
            <avue-information-body :operationVal="operationVal" infoType='user'
              :whetherToRebindSecondaryEditing='false' v-model="formData['F_UserId']" placeholder="当前用户申请人id"
              :disabled="hasDisabledPermission('F_UserId',true)"
              :readonly="!hasEditPermission('F_UserId',true)" :style="{width: '100%'}">
            </avue-information-body>
          </el-form-item>
        </el-col>
        <!-- 申请人姓名 -->
        <el-col :span="24" v-if="hasFormPermission('F_UserName')">
          <el-form-item :label="$t('申请人姓名')" prop="F_UserName">
            <el-input v-model="formData['F_UserName']" placeholder="请输入申请人姓名"
              :disabled="true"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色id -->
        <el-col :span="24" v-if="hasFormPermission('F_RoleId')" v-show="showFlag">
          <el-form-item :label="$t('角色id')" prop="F_RoleId">
            <el-input v-model="formData['F_RoleId']" placeholder="请输入角色id"
              :disabled="true"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色名称 -->
        <el-col :span="24" v-if="hasFormPermission('F_RoleName')" v-show="showFlag">
          <el-form-item :label="$t('角色名称')" prop="F_RoleName">
            <el-input v-model="formData['F_RoleName']" placeholder="请输入角色名称"
              :disabled="true"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 部门名称 -->
        <el-col :span="24" v-if="hasFormPermission('F_DepartmentName')" v-show="showFlag">
          <el-form-item :label="$t('部门名称')" prop="F_DepartmentName">
            <el-input v-model="formData['F_DepartmentName']" placeholder="请输入部门名称"
              :disabled="true"
              :readonly="true" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 部门id -->
        <el-col :span="24" v-if="hasFormPermission('F_DepartmentId')">
          <el-form-item :label="$t('部门')" prop="F_DepartmentId">
            <el-select v-model="formData['F_DepartmentId']" placeholder="请选择部门"
              :disabled="hasDisabledPermission('F_DepartmentId',false)" filterable clearable
              @change="Handleselect"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in F_DepartmentData" :key="index" :label="item.F_ShortName"
                :value="item.F_DepartmentId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 职级名称 -->
        <el-col :span="24" v-if="hasFormPermission('F_Job')" v-show="showFlag">
          <el-form-item :label="$t('职级名称')" prop="F_Job">
            <el-input v-model="formData['F_Job']" placeholder="请输入职级名称"
              :disabled="true"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 地区 -->
        <el-col :span="24" v-if="hasFormPermission('F_Area')" v-show="showFlag">
          <el-form-item :label="$t('地区')" prop="F_Area">
            <el-input v-model="formData['F_Area']" placeholder="请输入地区"
              :disabled="true"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 申请时间 -->
        <el-col :span="24" v-if="hasFormPermission('F_Create_Time')" v-show="showFlag">
          <el-form-item :label="$t('申请时间')" prop="F_Create_Time">
            <avue-information-body :operationVal="operationVal" infoType='date'
              :whetherToRebindSecondaryEditing='false' v-model="formData['F_Create_Time']" placeholder="当前时间"
              :disabled="hasDisabledPermission('F_Create_Time',true)"
              :readonly="!hasEditPermission('F_Create_Time',true)" :style="{width: '100%'}">
            </avue-information-body>
          </el-form-item>
        </el-col>
        <!-- 领用人id -->
        <!-- <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('领用人id')" prop="F_ReceiverId">
            <el-input v-model="formData['F_ReceiverId']" placeholder="请选择领用人"
              :readonly="true"
              :disabled="true"
              clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>

        </el-col> -->
        <!-- 领用人名称 -->
        <el-col :span="24" v-if="hasFormPermission('F_ReceiverName')">
          <el-form-item :label="$t('领用人名称')" prop="F_ReceiverName">
            <!-- <el-input v-model="formData['F_ReceiverName']" placeholder="请输入领用人名称"
               @focus="selectUser"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input> -->
            <SelectOneStaff @transmissionData="transmissionData" />
          </el-form-item>
        </el-col>
        <!-- 领用日期 -->
        <el-col :span="24" v-if="hasFormPermission('F_Receiver_Date')">
          <el-form-item :label="$t('领用日期')" prop="F_Receiver_Date">
            <el-date-picker :disabled="hasDisabledPermission('F_Receiver_Date',false)"
              :readonly="!hasEditPermission('F_Receiver_Date',false)"
              v-model="formData['F_Receiver_Date']" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择领用日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 办公物品 -->
        <el-col :span="24">
         <el-form-item :label="$t('办公物品')">
              <div class="office_things">
                <div class="table_header1">
                  <div class="table_header1_xuhao border">序号</div>
                  <div class="table_header1_qingdan border">办公物品清单</div>
                  <div class="table_header1_shuliang border">领用数量</div>
                  <div class="table_header1_caozuo border">操作</div>
                </div>
                <div class="table_body1">
                   <div class="table_header1_xuhao border">1</div>
                    <div class="table_header1_qingdan border">
                      <el-input class="el_input_items" @focus="selectWP()" v-model="formData['F_Office_SuppliesName']" placeholder="请点击选择"></el-input>
                    </div>
                    <div class="table_header1_shuliang border">
                      <el-input class="el_input_items" v-model.number="formData['F_EquipmentNum']" placeholder="请输入数量"></el-input>
                    </div>
                    <div class="table_header1_caozuo border"> 
                      <el-link type="danger" @click="deleteManifest(item,index)" v-show="false">删除</el-link>
                    </div>
                </div>
                <div class="table_bottom_buttons" v-show="false">
                  <el-button class="new-add" icon="el-icon-plus" @click="addManifestList">新增</el-button>
                </div>
              </div>
          </el-form-item>
        </el-col>
        <!-- 备注 -->
        <el-col :span="24" v-if="hasFormPermission('F_Remark')">
          <el-form-item :label="$t('备注')" prop="F_Remark">
            <el-input v-model="formData['F_Remark']" type="textarea" placeholder="请输入备注"
              :disabled="hasDisabledPermission('F_Remark',false)"
              :readonly="!hasEditPermission('F_Remark',false)" :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 是否生效 -->
        <el-col :span="24" v-if="hasFormPermission('F_IsEffective')" v-show="showFlag">
          <el-form-item :label="$t('是否生效')" prop="F_IsEffective">
            <el-input v-model="formData['F_IsEffective']" placeholder="请输入是否生效"
              :disabled="hasDisabledPermission('F_IsEffective',false)"
              :readonly="!hasEditPermission('F_IsEffective',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 意见簿 -->
        <el-col :span="24" v-if="hasWorkFlowFormPermission('field121ff4a')" v-show="optionsFlag">
          <el-form-item :label="$t('意见簿')" prop="field121ff4a">
            <xjr-opinion-comonent :value="formData.field121ff4a"></xjr-opinion-comonent>
          </el-form-item>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="24" v-if="!isWorkflowForm">
          <el-form-item size="large" v-if="isEdit">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              {{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}</el-button>
            <el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 人员列表 -->
    <el-dialog
      width="700px"
      title="人员列表"
      :visible.sync="selectUserVisible"
      append-to-body>
      <div class="select_user_body">
        <div class="select_user_body_left">
          <div class="companyInfo">公司部门</div>
          <div v-for="(item,index) in F_DepartmentData" :key="index"
              :class="item.F_Ischecked ? 'select_user_body_left_item1':'select_user_body_left_item'"
              @click="selectDepartment(item)">
             {{item.F_FullName}}
          </div>
        </div>
        <div class="select_user_body_right">
          <div class="select_user_body_right_top">
            <div class="select_user_body_right_top_left">已选人员：</div>
            <div class="select_user_body_right_top_right">
              <div class="select_user_body_right_top_right_item" 
                v-for="(item,index) in filterData" :key="index">
                  <div class="clodesssd1">
                    {{item.F_RealName}}
                  </div>
                  <div class="clodesssd" @click="removeItem(item)">x</div>&nbsp;
                </div>
            </div>
          </div>
          <div class="select_user_body_right_bottom">
            <div class="select_user_body_right_bottom_item" v-for="(item,index) in userListData"
              @click="selectUsers(item)"
              :key="index">
              {{item.F_RealName}}
            </div>
          </div>
        </div>
      </div>
      <div class="select_user_footer">
          <el-button class="el_button_sure" @click="cancleForm" >取消</el-button>
          <el-button class="el_button_sure" @click="sureForm" type="primary" >确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择办公用品清单 -->
    <el-dialog
      width="800px"
      title="选择办公用品清单"
      :visible.sync="WPQDlist"
      append-to-body>
      <div class="wp_search">
         <el-input class="wp_search_input"
          @keyup.enter.native="getPurchaseList"
          v-model="keyword" placeholder="请输入内容">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="wp_table_header">
        <div class="wp_table_header_xuhao">序号</div>
        <div class="wp_table_header_name">名称</div>
        <div class="wp_table_header_shuliang">数量</div>
        <div class="wp_table_header_danjia">单价</div>
      </div>
      <div class="wp_table_body" v-for="(item,index) in wpqdDataList" :key="index">
        <div class="wp_table_header_xuhao1">
          <el-checkbox @change="selectData(item)">
          </el-checkbox>
        </div>
        <div class="wp_table_header_name1">{{item.F_Name}}</div>
        <div class="wp_table_header_shuliang1">{{item.F_Counts}}</div>
        <div class="wp_table_header_danjia1">{{item.F_Price}}</div>
      </div>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          background
          :current-page="limit"
          :page-size="size"
          layout="prev,pager,next,total,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentPage"
          >
        </el-pagination>
      </div>
      <div class="select_user_footer">
          <el-button class="el_button_sure" @click="WPQDlist = false" >取消</el-button>
          <el-button class="el_button_sure" @click="sureWPQD" type="primary" >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import FilterableDataList from '@/components/generator/clientComponents/FilterableDataList.vue';
  import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
  import authorizeMixin from "@/mixins/authorize";
  import { baseUrl } from "@/config/env";
  import request from "@/router/axios";
      import SelectOneStaff from '@/components/staffSelector/selectOneStaff.vue'

  import {getUserDetailsById,getCUrrentDepartmentUserList,getPurchaseList} from '@/api/user.js';
  import { log } from 'video.js';

  export default {
    mixins: [authorizeMixin,workflowFormAuthorize],
    components: {SelectOneStaff},
    props: ['keyValue', 'isEdit', 'disabled'],
    data() {
      let _this = this
      return {
        submitLoading: false,
        showForm: true,
        showFormKey: 1,
        reRenderSubform: false,
        operationVal: 'add',
        isAdd: true,
        addressUrl:'equipmentapplication',
        mainTableName: 'oa_equipment_application',
        formConfig: {},
        formData: {
          'field1014526': '',
          'F_UserId': '',
          'F_UserName': '',
          'F_Create_Time': '',
          'F_ReceiverName': '',
          // 'F_ReceiverId': '',
          'F_Receiver_Date': null,
          'F_Job': '',
          'F_DepartmentName': '',
          'F_DepartmentId': '',
          'F_RoleId': '',
          'F_RoleName': '',
          'F_Area': '',
          'F_Office_SuppliesName':'',//物品名称
          'F_Office_Supplies': '',//物品id

          'F_EquipmentNum':0,//物品数量
          
          'F_Remark': '',
          'F_IsEffective': '0',
          'field121ff4a': null,
        },
        rules: {
          F_UserName: [{
            required: true,
            message: '请输入申请人姓名',
            trigger: 'blur'
          }],
          F_ReceiverName: [{
            required: true,
            message: '请输入领用人名称',
            trigger: 'blur'
          }],
          // F_ReceiverId: [],
          F_Receiver_Date: [{
            required: true,
            message: '请选择领用日期',
            trigger: 'change'
          }],
          F_Job: [{
            required: true,
            message: '请输入职级名称',
            trigger: 'blur'
          }],
          F_DepartmentName: [{
            required: true,
            message: '请输入部门名称',
            trigger: 'blur'
          }],
          F_DepartmentId: [{
            required: true,
            message: '请选择部门id',
            trigger: 'change'
          }],
          F_RoleId: [{
            required: true,
            message: '请输入角色id',
            trigger: 'blur'
          }],
          F_RoleName: [{
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }],
          F_Area: [{
            required: true,
            message: '请输入地区',
            trigger: 'blur'
          }],
          F_Office_Supplies: [{
            required: true,
            message: '请输入办公物品',
            trigger: 'blur'
          }],
          F_Remark: [{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
          F_IsEffective: [{
            required: true,
            message: '请输入是否生效',
            trigger: 'blur'
          }],
        },
        F_ReceiverIdOptions: undefined,
        F_RoleData:[],//角色信息
        F_DepartmentData:[],//部门信息
        selectUserVisible:false,
        WPQDlist:false,
        userListData:[],
        filterData:[],
        manifestList:[
          {
            id:'',
            name:'',
            numbers:''
          }
        ],
        wpqdDataList:[],
        total:'',
        keyword:'',//关键字
        limit:1,//当前页数
        size:10,//每页显示大小
        hasSelect:[],
        showFlag:false

      }
    },
    computed: {},
    watch: {},
    created() {
      this.formConfig = this.getFormConfig();
    },
    async mounted() {
        //TODO 再这里做数据回填 请求表单数据
        if(this.keyValue){
            this.isAdd = false;
        }
        if(!this.isAdd&&this.keyValue){
          this.operationVal = 'edit';
          let res = await request({
            url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
            method: "get",
          });
          this.formData = res.data.data
          this.showFormKey++;
        }
        await this.getCurrentUserIndo()
        await this.getPurchaseList()
        await this.initWPName()

    },
    methods: {
      transmissionData(value){
        this.formData['F_ReceiverName'] = value
      },
      initWPName(){
        setTimeout(() => {
          if(this.formData.F_Office_Supplies){
            if(this.wpqdDataList && this.wpqdDataList.length > 0){
              this.wpqdDataList.forEach(e => {
                if(e.F_Id == this.formData.F_Office_Supplies){
                  
                  this.formData['F_Office_SuppliesName'] = e.F_Name
                  this.WPQDlist = true
                  this.WPQDlist = false
                }
              })
            }
          }
        }, 1000);
      },
      handleSizeChange(v){
        this.size = v
        this.getPurchaseList()
      },
      handleCurrentPage(page){
        this.limit = page
        this.getPurchaseList()
      },
      sureForm(){
        this.selectUserVisible = false
        // this.formData['F_ReceiverId'] = this.filterData[0].F_UserId 
        this.formData['F_ReceiverName'] = this.filterData[0].F_RealName 
      },
      cancleForm(){
        this.selectUserVisible = false
      },
      selectUser(){
        this.selectUserVisible = true
        if(this.F_DepartmentData && this.F_DepartmentData.length > 0){
          this.F_DepartmentData.forEach(e=>{
            e.F_Ischecked = false
          })
           this.F_DepartmentData[0].F_Ischecked = true
        }
        this.F_DepartmentData = [...this.F_DepartmentData]
        //根据用户部门id获取部门所有员工信息
        getCUrrentDepartmentUserList(this.F_DepartmentData[0].F_DepartmentId).then(res => {
          if(res.data.success){
           this.userListData = res.data.data
          }
        })

      },
      selectUsers(item){
        this.filterData = []
        this.filterData.push(item)
      },
      removeItem(item){
        this.filterData = []
      },
      selectDepartment(item){
        this.F_DepartmentData.forEach(e =>{
          e.F_Ischecked = false
        })
        item.F_Ischecked = true
        getCUrrentDepartmentUserList(item.F_DepartmentId).then(res => {
          if(res.data.success){
           this.userListData = res.data.data
          }
        })
        this.F_DepartmentData = [...this.F_DepartmentData]
      },
      Handleselect(){
        if(this.F_DepartmentData && this.F_DepartmentData.length > 0){
          this.F_DepartmentData.forEach(e => {

            if(e.F_DepartmentId == this.formData['F_DepartmentId']){
              this.formData['F_DepartmentName'] = e.F_ShortName
            }
          })
        }
      },
      getPurchaseList(){
        getPurchaseList(this.limit,this.size,this.keyword).then(res=>{
          if(res.data.success){
            this.wpqdDataList = res.data.data.Rows//物品列表
            this.total = res.data.data.Total//总数
          }
        })
      },
      getCurrentUserIndo(){
        let params
          if(this.formData.F_UserId){
            params = {
              userId:this.formData.F_UserId
            }
          }else{
            params = {
              userId:this.$store.state.user.userInfo.F_UserId
            }
          }
         getUserDetailsById(params).then(res => {
            if(res.data.success){
              this.formData['F_UserName'] = res.data.data.F_RealName//申请人姓名
              this.formData['F_Job'] = res.data.data.F_Job//职级信息
              this.formData['F_Area'] = res.data.data.F_Area
              this.F_RoleData = res.data.data.F_Role//角色信息
              this.F_DepartmentData = res.data.data.F_Department//部门信息
              this.initInfo()
              this.initDepartmentData()
           }
        })
      },
      initDepartmentData(){
        if(this.F_DepartmentData && this.F_DepartmentData.length == 1){
          this.formData['F_DepartmentName'] = this.F_DepartmentData[0].F_FullName
          this.formData['F_DepartmentId'] = this.F_DepartmentData[0].F_DepartmentId
        }
      },
      initInfo(){
        let RoleId = []
        let RoleName = []
        if(this.F_RoleData && this.F_RoleData.length > 0){
          this.F_RoleData.forEach(e => {
            RoleId.push(e.F_RoleId)
            RoleName.push(e.F_FullName)
          })
        } 
        this.formData['F_RoleId'] = RoleId.join(',')
        this.formData['F_RoleName'] = RoleName.join(',')
      },
      getFormData() {
        let key = this.mainTableName + 'Entity';
        let returnParams = {};
        returnParams[key] = this.formData;
        return {
          ...returnParams,
        };
      },
      validateForm() {
        this.$refs['elForm'].validate(valid => {});
      },
      async aysncValidateForm() {
        let validataArry = []
        validataArry.push(new Promise((resolve, reject) => {
          this.$refs['elForm'].validate(valid => {
            resolve(valid)
          })
        }))
        let res = await Promise.all(validataArry)
        if (res.includes(false)) {
          return false
        }
        else {
          return true;
        }
      },
      changeTableData() {},
      async submitForm() {
        this.submitLoading = true;
        let valid = await this.aysncValidateForm();
        if (valid == false) {
          this.submitLoading = false;
          return false;
        }
        this.changeTableData();
        //格式化数据
        let newObj = this.getFormData();
        
          //如果没有传入参数就是新增
          if (!this.keyValue) {

            request({
              url: baseUrl + "/"+this.addressUrl,
              method: "post",
              data : newObj
            }).then((res) => {
              this.submitLoading = false;
              this.$notify({
                title: "成功",
                message: "新增成功",
                type: "success",
              });
              this.$emit("onChange",true)
            });

          }
          else{

          request({
              url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
              method: "put",
              data : newObj
            }).then((res) => {
              this.submitLoading = false;
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
              });
              this.$emit("onChange",true)
            });

          }
        
        
        
      },
      cancelForm() {
        this.$emit("onChange", true)
      },
      formatTree(data, valueField, lableField, childField, type) {
        let tree = [];
        data.forEach((node, index) => {
          let newNode = {
            value: node[valueField],
            label: node[lableField],
          };
          if (type) {
            newNode.disabled = node[valueField] == undefined ? true : false
          }
          tree.push(newNode);
          if (node[childField] != null && node[childField].length > 0) {
            newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
            type));
          }
        }, this);
        return tree;
      },
      //辅助工作流 审批(编辑) 预留方法
      handleEdit() {
      },
      //子表单权限
      getAuthorityTableChildrenList(bindTable, children) {
        let column = [];
        if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
          let formSubEnCodeList = this.formEnCodeList[bindTable];
          if (children && children.length > 0) {
            column = children.map(ele2 => {
              if (formSubEnCodeList.includes(ele2.prop)) {
                ele2.hide = false;
              }
              else {
                ele2.hide = true;
              }
              if (ele2.hide == false) {
                //工作流中系统表单必填权限
                if (this.formSubTableNotRequiredList[bindTable] != undefined) {
                  if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
                    ele2.required = false;
                  }
                  else {
                    ele2.required = true;
                  }
                }
                ele2.rules = [];
                if (ele2.required) {
                  ele2.rules = ele2.ruleList;
                }
                // disabled 属性
                if (this.formSubTableDisabledList[bindTable] != undefined) {
                  if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
                    ele2.disabled = true;
                  }
                  else {
                    ele2.disabled = false;
                  }
                }
              }
              return ele2;
            });
          }
          return column;
        }
        else {
          return children;
        }
      },
      getFormConfig() {
        let config = {
          "fields": [{
            "__vModel__": "field1014526",
            "__config__": {
              "label": "设备申请",
              "showLabel": false,
              "titleColor": null,
              "fontSize": null,
              "tag": "h2",
              "span": 24,
              "align": "top",
              "justify": "start",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 101
            }
          }, {
            "__vModel__": "F_UserId",
            "__type__": "info",
            "infoType": "user",
            "__organize__": true,
            "__config__": {
              "label": "申请人id",
              "showLabel": true,
              "tag": "avue-information-body",
              "avueType": "information-body",
              "defaultValue": "316231f32f1f0e5a4c56bf855806b924",
              "required": false,
              "span": 24,
              "whetherToRebindSecondaryEditing": false,
              "bindTableField": "F_UserId",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 100,
              "placeholder": "当前用户",
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_UserName",
            "__config__": {
              "label": "申请人姓名",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 102,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_UserName",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_Create_Time",
            "__type__": "info",
            "infoType": "date",
            "__organize__": true,
            "__config__": {
              "label": "申请时间",
              "showLabel": true,
              "tag": "avue-information-body",
              "avueType": "information-body",
              "defaultValue": "2022-06-07 16:26:12",
              "required": false,
              "span": 24,
              "whetherToRebindSecondaryEditing": false,
              "bindTableField": "F_Create_Time",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 108,
              "placeholder": "当前时间",
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_ReceiverName",
            "__config__": {
              "label": "领用人名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 105,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_ReceiverName",
              "bindTableFieldType": "varchar"
            }
          },
          //  {
          //   "__vModel__": "F_ReceiverId",
          //   "__type__": "user",
          //   "__organize__": true,
          //   "suffix-icon": "el-icon-setting",
          //   "__config__": {
          //     "label": "领用人id",
          //     "showLabel": true,
          //     "tag": "xjr-select-user",
          //     "saveValue": "",
          //     "required": false,
          //     "span": 24,
          //     "bindTableField": "F_ReceiverId",
          //     "F_LgMarkCode": "",
          //     "prestrainField": "",
          //     "formId": 104,
          //     "fieldLength": "50",
          //     "bindTable": "oa_equipment_application",
          //     "bindTableFieldType": "varchar"
          //   }
          // },
           {
            "tempType": "date",
            "__vModel__": "F_Receiver_Date",
            "__config__": {
              "label": "领用日期",
              "tag": "el-date-picker",
              "avueType": "datetime",
              "defaultValue": null,
              "showLabel": true,
              "span": 24,
              "required": true,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 107,
              "fieldLength": "100",
              "bindTableFieldType": "datetime",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_Receiver_Date"
            }
          }, {
            "__vModel__": "F_Job",
            "__config__": {
              "label": "职级名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 110,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_Job",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_DepartmentName",
            "__config__": {
              "label": "部门名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 113,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_DepartmentName",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_DepartmentId",
            "__config__": {
              "label": "部门id",
              "showLabel": true,
              "tag": "el-select",
              "avueType": "select",
              "span": 24,
              "required": true,
              "saveField": "",
              "showField": "",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 112,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_DepartmentId",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_RoleId",
            "__config__": {
              "label": "角色id",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 114,
              "fieldLength": 500,
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_RoleId",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_RoleName",
            "__config__": {
              "label": "角色名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 115,
              "fieldLength": 500,
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_RoleName",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_Area",
            "__config__": {
              "label": "地区",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 116,
              "fieldLength": "50",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_Area",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_Office_Supplies",
            "__config__": {
              "label": "办公物品",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 117,
              "fieldLength": "2000",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_Office_Supplies",
              "bindTableFieldType": "varchar"
            }
          }, {
            "tempType": "textarea",
            "__vModel__": "F_Remark",
            "__config__": {
              "label": "备注",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "textarea",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 118,
              "fieldLength": 2000,
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_Remark",
              "bindTableFieldType": "varchar"
            }
          }, {
            "__vModel__": "F_IsEffective",
            "__config__": {
              "label": "是否生效",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 119,
              "fieldLength": "2",
              "bindTable": "oa_equipment_application",
              "bindTableField": "F_IsEffective",
              "bindTableFieldType": "int"
            }
          }, {
            "tempType": "textarea",
            "__vModel__": "field121ff4a",
            "__type__": "opinion",
            "__config__": {
              "label": "意见簿",
              "showLabel": true,
              "tag": "xjr-opinion-comonent",
              "defaultValue": null,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 121
            }
          }]
        };
        return config;
      },
      // addManifestList(){
      //   this.manifestList.push(
      //     {
      //       id:'',
      //       name:'',
      //       numbers:''
      //     }
      //   )
      // },
      // deleteManifest(item,index){
      //   this.manifestList.splice(index,1)
      // },
      selectWP(){
        this.WPQDlist = true
      },
      selectData(item){
        this.hasSelect = []
        this.hasSelect.push(item)
      },
      sureWPQD(){
        this.formData['F_Office_Supplies'] = this.hasSelect[0].F_Id
        this.formData['F_Office_SuppliesName'] = this.hasSelect[0].F_Name
        this.WPQDlist = false
      }
    }
  }
</script>
<style>
.fenye{
  width: 100%;
  margin: 16px 0;
  text-align: center;
}
.el-table__empty-block {
  width: 100% !important;
}
.avue-form__row {
  padding: 0 !important;
}
#editorphone {
  width: 375px;
  margin: 0 auto;
  border: 1px solid #E4E7ED;
  padding: 0 7.5px;
  background: #f5f6fa;
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 5px;
}
#editorphone .el-col {
  border-bottom: 1px solid #F2F2F2;
  background: #fff;
  margin-bottom: 0;
  padding: 0 15px 6px !important;
  width: 100%;
}
#editorphone .el-form-item__label {
  line-height: 20px
}
#editorphone .el-input-group .el-input__inner {
  background: #f5f6fa
}
#editorphone .el-input__inner {
  border: 0
}
#editorphone .el-input-group__append,
#editorphone .el-input-group__prepend {
  border: 0;
  background: #edeef2;
  color: #666;
}
#editorphone .el-input-group .el-input__prefix {
  left: 44px
}
#editorphone .el-input-group .el-input__suffix {
  right: 44px
}
#editorphone .el-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
}
#editorphone .el-form-item__label {
  float: none;
  min-width: 85px;
  width: auto !important;
  text-align: left;
  flex: auto;
}
#editorphone .tinymce .el-form-item__label {
  min-width: 100%;
}
#editorphone .el-form-item__content {
  margin-left: 0px !important;
  flex: auto;
  width: calc(100% - 95px);
}
#editorphone .avueFormNoLable .el-form-item__label,
#editorphone .avueFormNoLable .avue-crud__pagination {
  display: none;
}
#editorphone .avueFormNoLable .el-collapse-item__wrap,
#editorphone .avueFormNoLable .el-collapse {
  border-bottom: 0
}
#editorphone .avueFormNoLable .el-col {
  border-bottom: 0;
  padding-bottom: 0
}
#editorphone .el-form-item__content .el-button:first-child {
  margin-left: 90px;
}


.select_user_footer{
  width: 100%;
  height: 50px;
  text-align: right;
}
.el_button_sure{
  margin-top: 5px;
  margin-right: 5px;
}
.select_user_body{
  width: 100%;
  height: 350px;
  border: 1px solid #eee;
  margin: 12px 0;
  display: flex;
  flex-direction: row;
}
.select_user_body_left{
  width: 30%;
  height: 100%;
  border: 1px solid #eee;
}
.select_user_body_left_item{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
}
.select_user_body_left_item:hover{
  background: #0063f5;
  color: #fff;
  border-radius: 4px;
}
.select_user_body_left_item1{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
  background: #0063f5;
  color: #fff;
}
.companyInfo{
  font-size: 18px;
  height: 50px;
  border-bottom: 1px solid #eee;
  font-weight: 400;
  color: #000;
  text-indent: 12px;
  line-height: 50px;
  
}
.select_user_body_right{
  width: 70%;
  height: 100%;
  border: 1px solid #eee;
}
.select_user_body_right_top{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
}
.select_user_body_right_top_left{
  width: 100px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: center;
}
.select_user_body_right_top_right{
  width: 300px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: left; 

}
.select_user_body_right_top_right_item{
  width: 100px;
  height: 32px;
  margin-top: 8px;
  border: 1px solid #0063f5;
  background: #0063f5;
  color: #fff;
  border-radius: 8px;
  line-height: 32px;
  text-indent: 12px;
}
.select_user_body_right_bottom{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.select_user_body_right_bottom_item{
  width: 70px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #0063f5;
  line-height: 32px;
  text-align: center;
  font-size: 16px;
  color: #0063f5;
  margin-left: 16px;
  margin-top: 16px;
}
.select_user_body_right_bottom_item:hover{
  width: 70px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #fff;
  line-height: 32px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-left: 16px;
  margin-top: 16px;
  background: #0063f5;
  cursor: pointer;

}
.clodesssd{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: red;
  background: #fff;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
  text-indent: 0;
}
.clodesssd1{
width: 70px;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clodesssd:hover{
  cursor: pointer;
}

.office_things{
  width: 50%;
}
.table_header1{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  background: rgb(246, 246, 246);
}
.table_body1{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
}
.table_bottom_buttons{
  width: 100%;
  height: 40px;
}
.new-add{
  margin-top: 7px;
}
.table_header1_xuhao{
  width: 10%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.table_header1_qingdan{
  width: 40%;
  height: 100%;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
}
.el_input_items{
  width: 80%;
}
.table_header1_shuliang{
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.table_header1_caozuo{
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 40px;
}
.border{
  border: 1px solid rgb(221, 221, 223);
}
.wp_search{
  width: 100%;
  height: 40px;
}
.wp_search_input{
  width: 40%;
  margin-top: 4px;
}
.wp_table_header{
  width: 100%;
  height: 40px;
  background: rgb(250, 250, 250);
  display: flex;
  flex-direction: row;
}

.wp_table_header_xuhao{
  width: 10%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_name{
  width: 50%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_shuliang{
  width: 20%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_danjia{
  width: 20%;
  border-right: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}

.wp_table_body{
   width: 100%;
  height: 40px;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;

}

.wp_table_header_xuhao1{
  width: 10%;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_name1{
  width: 50%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_shuliang1{
  width: 20%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
.wp_table_header_danjia1{
  width: 20%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #000;
  line-height: 40px;
  text-align: center;
}
</style>
